<template>
  <div class="tabs"> 
    <el-tag size="small "
      v-for="(item,index) in tags"
      :key="item.path"
      :closable="item.name!=='home'"
      :effect="$route.name===item.name?'dark':'plain' "
      @click="chageMeun(item)"
      @close="handleClose(item,index)">
      {{item.label}}
</el-tag>
  </div>
</template>

<script>
import { mapState,mapMutations } from 'vuex'
  export default{
    name:'CommonTags',
    data(){
        return {

        }
    },
    methods:{
      ...mapMutations(['closeTag']),
      //点击tag跳转页面
      chageMeun(item)
      {
        this.$router.push({name:item.name})
      },
      //删除tags
      handleClose(item,index){
        this.closeTag(item)
        //删除之后的页面跳转
        if(item.name!==this.$route.name)
        {
          return
        }
        //如果删除的是最后一页
        if(index===this.tags.lenght)
        {
          this.$router.push({
            name:this.tags[index-1].name
          })
        }else{
          // console.log(this.tags[index].name)
          this.$router.push({
            name:this.tags[index-1].name
          })
        }
      }
    },
    computed:{
      ...mapState({
        tags:state=>state.tab.tabsList
      })
    }
  }
</script>

<style lang="less" scoped>
  .tabs{
    padding: 20px;
    .el-tag{
      margin-right: 15px;
      cursor: pointer;
    }
  }
</style>